{% load i18n %}
{{ pay_types|json_script:"pay-type-data" }}
<div id="paytype">
    <div class="bk-columns bk-is-multiline">
        <template v-for="pay in payTypeList" :key="pay.value">
            <div class="bk-column bk-is-4-desktop bk-is-6-tablet">
                <div class="bk-box bk-is-clickable p-5 bk-is-relative paytype-box" @click="selectedPayTypeID = pay.value" :class="{ 'is-selected': pay.value === selectedPayTypeID }">
                    <div class="is-absolute is-top-right bk-tag bk-is-link bk-is-light mr-2 mt-2" v-if="pay.value === selectedPayTypeID">
                        <span class="bk-icon">
                            <i class="mdi mdi-check"></i>
                        </span>
                        <span class="bk-is-size-7">{% translate '已选择' %}</span>
                    </div>
                    <div class="bk-is-flex bk-is-justify-content-center bk-is-align-items-center">
                        <span v-if="pay.value === 0">
                            <svg t="1731557689241" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4267" width="48" height="48"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="4268"></path></svg>
                        </span>
                        <span v-if="pay.value === 1">
                            <svg t="1731558158294" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5317" width="48" height="48"><path d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z" fill="#15BA11" p-id="5318"></path></svg>
                        </span>
                        <span v-if="pay.value === 2">
                            <svg t="1731558341442" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9246" width="48" height="48"><path d="M813.7 274.1c-60.1 0-109 48.9-109 109s48.9 109 109 109 109-48.9 109-109-48.9-109-109-109z m40.8 126.3v-0.3c-0.2 9.3-4.1 16.9-12 22.6-1.8 1.3-3.7 2.4-5.7 3.4V446h-20.5v-14.9c-2 0.1-4.1 0.2-6.2 0.2h-1.7V446H788v-17.1c-5.4-1.3-10.4-3-15.1-5V401h2.3c5.1 4.1 10.8 7.2 17 9.4 6.2 2.2 12.2 3.3 18 3.3 1.5 0 3.4-0.2 5.8-0.5s4.4-0.8 5.8-1.4c1.8-0.7 3.3-1.8 4.5-3.1 0.3-0.4 0.5-0.7 0.7-1 0.1-0.1 0.2-0.3 0.2-0.4 0.1-0.3 0.3-0.5 0.4-0.8 0-0.1 0.1-0.3 0.2-0.5 0.1-0.3 0.1-0.5 0.2-0.8 0-0.2 0-0.4 0.1-0.6 0-0.4 0.1-0.8 0.1-1.2 0-2.4-1-4.4-3-5.9s-4.4-2.6-7.3-3.3c-3.5-0.8-7.2-1.7-11.2-2.5-4-0.8-7.7-1.7-11.1-2.8-4.1-1.4-7.6-3-10.5-4.9v0.1c-0.4-0.2-0.7-0.5-1-0.7-0.3-0.1-0.6-0.4-0.8-0.5-0.4-0.3-0.7-0.6-1-0.9-0.3-0.2-0.5-0.4-0.7-0.6-0.4-0.4-0.8-0.7-1.1-1.1-0.1-0.1-0.3-0.3-0.4-0.5-0.5-0.5-1-1.1-1.4-1.6-3.3-4.3-5-9.6-5.1-16v-0.8c0-9 4.1-16.4 12.2-22 0.7-0.5 1.5-1 2.3-1.4v-18.2h20.5v11.6c2.5-0.2 5-0.4 7.7-0.4h0.2v-11.3H837v13.5c5 1.1 9.6 2.5 13.7 4.2v22h-2.3c-3.8-3.1-8.4-5.7-13.9-7.7-1.2-0.5-2.4-0.8-3.5-1.2-0.5-0.1-0.9-0.3-1.4-0.4-0.9-0.2-1.7-0.4-2.6-0.6-0.5-0.1-0.9-0.2-1.4-0.3-0.9-0.1-1.8-0.3-2.8-0.4-0.4 0-0.8-0.1-1.2-0.1-1.3-0.1-2.7-0.2-4-0.2-2.2 0-4.3 0.1-6.1 0.5-1.8 0.3-3.7 0.9-5.6 1.8-1.6 0.6-3 1.7-4.1 3.1-1.2 1.3-1.7 2.9-1.7 4.6 0 0.5 0.1 0.9 0.1 1.3 0.1 0.2 0.1 0.4 0.1 0.6l0.3 0.9c0.1 0.2 0.2 0.4 0.2 0.6l0.6 0.9c0.1 0.1 0.2 0.3 0.3 0.4 0.3 0.4 0.7 0.7 1.2 1.1 0.3 0.2 0.7 0.5 1.1 0.7 0.1 0 0.2 0.1 0.3 0.2 0.4 0.2 0.8 0.4 1.3 0.6 2 0.8 4.7 1.7 8 2.4 3.4 0.8 6.8 1.5 10 2.1 3.2 0.7 6.6 1.7 10.2 2.9 7.1 2.5 12.4 5.6 15.9 9.8 3.5 4.1 5.2 9.4 5.2 16.2-0.3 0.6-0.3 0.9-0.4 1.2z m0 0" fill="#19CA99" p-id="9247"></path><path d="M858.1 0H165.9C74.3 0 0 74.5 0 166.4v691.1c0 92 74.3 166.5 165.9 166.5H858c91.6 0 165.9-74.5 165.9-166.4V166.4C1024 74.5 949.7 0 858.1 0z m82.8 502.5c-21.8 21.6-205 198-219.1 210.6-23.7 21.2-45.8 33.3-78.7 26.1-32.9-7.3-319.1-72.7-319.1-72.7s-26.9 9.7-28.8 18.4c-0.8 3.7-10.2 46-20.6 93.1H73.1v-45.9c43.6-110.1 95.5-237.7 106.1-254.6 29.9-47.9 78.2-72.1 138.7-70.1 20 0.7 71.2 5.5 106.3 7.1 30.5 1.3 54.1-13.9 54.1-13.9s146.2-105 180.2-124.2c34-19.2 55.7 4.4 38.5 32.4-17.2 28-125.5 168.5-139.9 186-14.4 17.5-4.9 52.4 11.5 58.5 9.1 3.4 74.9 33.2 91.7 40.1 16.8 7 59.2 7.9 84-8 12.7-8.2 62.9-41.5 106.4-70.4-11.8 3.3-24.2 5.2-37 5.2-75.6 0-137.1-61.5-137.1-137.1S738.1 246 813.7 246s137.2 61.5 137.2 137.1c0 32.6-11.5 62.6-30.6 86.2 23.7-10.8 40.8 13.2 20.6 33.2z m0 0" fill="#19CA99" p-id="9248"></path></svg>
                        </span>
                        {% verbatim %}<h1 class="bk-is-size-4 ml-3 bk-has-text-grey-dark">{{ pay.label }}</h1>{% endverbatim %}
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>
<script>
    const { ref, computed, createApp } = bayke.vue
    const payType = createApp({
        setup() {
            const payTypeList = computed(() => {
                return JSON.parse(document.getElementById('pay-type-data').textContent)
            })
            const selectedPayTypeID = ref(0)
            return {
                payTypeList,
                selectedPayTypeID
            }
        },
    }).mount('#paytype')
</script>
<style>
    #paytype .is-absolute{
        position: absolute;
    }
    #paytype .is-top-right{
        top: 0;
        right: 0;
    }
    #paytype .is-bottom-right{
        bottom: 0;
        right: 0;
    }
    #paytype .is-selected{
        border: 1px solid #022ce9;
    }
</style>